import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import AiChat from '../../components/AiChat';
import './AiPage.css';

const AiPage: React.FC = () => {
  const navigate = useNavigate();
  const [showChat, setShowChat] = useState(false);

  return (
    <div className="ai-page">
      {/* 顶部导航栏 */}
      <div className="ai-navbar">
        <div className="navbar-left">
          <button 
            className="back-button"
            onClick={() => navigate('/admin/dashboard')}
          >
            ← 返回
          </button>
        </div>
        <div className="navbar-center">
          <h1>AI 智能助手</h1>
        </div>
        <div className="navbar-right">
          <div className="user-info">
            <span>欢迎使用AI助手</span>
          </div>
        </div>
      </div>

      {/* 主要内容区域 */}
      <div className="ai-main-content">
        <div className="ai-container">
          {/* 页面标题和描述 */}
          <div className="page-header">
            <h2>AI 智能助手</h2>
            <p>基于先进AI技术的智能问答系统，支持实时对话和上下文理解</p>
          </div>

          {/* 功能卡片区域 */}
          <div className="ai-features">
            <div className="feature-card" onClick={() => setShowChat(true)}>
              <div className="feature-icon">🤖</div>
              <h3>智能问答</h3>
              <p>基于先进AI技术的智能问答系统</p>
            </div>
            <div className="feature-card" onClick={() => setShowChat(true)}>
              <div className="feature-icon">💬</div>
              <h3>实时对话</h3>
              <p>支持实时对话和上下文理解</p>
            </div>
            <div className="feature-card" onClick={() => setShowChat(true)}>
              <div className="feature-icon">🌐</div>
              <h3>多语言支持</h3>
              <p>支持多种语言的智能交互</p>
            </div>
          </div>

          {/* 开始对话按钮 */}
          <div className="ai-actions">
            <button 
              className="start-chat-btn"
              onClick={() => setShowChat(true)}
            >
              🚀 开始AI对话
            </button>
          </div>
        </div>
      </div>
      
      {/* AI聊天对话框 */}
      {showChat && (
        <div className="ai-chat-overlay">
          <AiChat onClose={() => setShowChat(false)} />
        </div>
      )}
    </div>
  );
};

export default AiPage;
